<template>
  <view class="tab-bar" :style="{paddingBottom: tabBarBottom + 'px'}" id="tabBar">
    <view
      v-for="(item, index) in tabbarList"
      :key="index"
      class="tab-bar-item"
      @click="tabbarChange(item.pagePath)"
    >
      <image
        :src="active === index ? item.selectedIconPath : item.iconPath"
        class="tab-bar-icon"
      ></image>
      <view class="tab-bar-text">{{ item.text }}</view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      active: {
        type: Number,
        default: 0,
        userRole: 0
      }
    },
    data(){
      return {
        tabActive: null,
        tabBarBottom: 0,
        tabBarHeight: 0
      }
    },
    mounted(){
      this.tabBarBottom = uni.getStorageSync('tabBarBottom')
      this.userRole = uni.getStorageSync('userRole')
      if (this.userRole == 2) {
        this.tabbarList = [{
          "pagePath": "/pages/frontPage/index",
          "iconPath": "/static/tab-home.png",
          "selectedIconPath": "/static/tab-home-hover.png",
          "text": "首页"
        }]
      } else if (this.userRole == 3) {
        this.tabbarList = [{
          "pagePath": "/pages/admin/index",
          "iconPath": "/static/tab-home.png",
          "selectedIconPath": "/static/tab-home-hover.png",
          "text": "首页"
        }]
      } else if (this.userRole == 1) {
        this.tabbarList = [{
          "pagePath": "/pages/student/index",
          "iconPath": "/static/tab-home.png",
          "selectedIconPath": "/static/tab-home-hover.png",
          "text": "首页"
        }, {
          "pagePath": "/pages/student/edit",
          "iconPath": "/static/icon_edit.png",
          "selectedIconPath": "/static/icon_edit_hover.png",
          "text": "修改"
        }, {
          "pagePath": "/pages/student/mine",
          "iconPath": "/static/tab_mine.png",
          "selectedIconPath": "/static/tab-mine-hover.png",
          "text": "我的"
        }]
      } else if (this.userRole == 4) {
        this.tabbarList = [{
          "pagePath": "/pages/teacher/index",
          "iconPath": "/static/tab-home.png",
          "selectedIconPath": "/static/tab-home-hover.png",
          "text": "首页"
        }, {
          "pagePath": "/pages/teacher/mine",
          "iconPath": "/static/tab_mine.png",
          "selectedIconPath": "/static/tab-mine-hover.png",
          "text": "我的"
        }]
      }
      this.$nextTick(() => {
        this.tabActive = this.active
        const query = uni.createSelectorQuery().in(this);
        query.select("#tabBar").boundingClientRect((res) => {
          if (res) {
            this.tabBarHeight = res.height; // 更新模块的高度
            uni.setStorageSync('tabBarHeight', res.height)
            console.log(87, this.tabBarHeight);
          }
        }).exec(); 
      })
    },
    data() {
      return {
        tabBarBottom:0,
        userRole: null,
        tabbarList: []
      };
    },
    methods: {
      tabbarChange(pagePath) {
        console.log(83, pagePath)
    	  uni.redirectTo({ url: pagePath });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .tab-bar {
      width: 100%;
      height: 88rpx;
      background-color: #fff;
      position: fixed;
      bottom: 0;
      left: 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
      box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.1);
      z-index: 9;
      padding-top:12rpx;
      padding-bottom:12rpx;
    }
  
    .tab-bar-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  
    .tab-bar-center {
      width:87rpx;
      border-radius: 50%;
      margin-top:-87rpx;
      z-index: 1000;
    }
    .tab-bar-item .tab-bar-icon {
      width: 50rpx;
      height: 50rpx;
    }
    .tab-bar-center .tab-bar-icon{
      width:128rpx;
      height:128rpx;
    }
  
    .tab-bar-text {
      font-size: 24rpx;
      color: #7a7e83;
    }
    .tab-bar-center .tab-bar-text {
      /* margin-top:20rpx; */
    }
  
</style>